import {observer} from 'mobx-react-lite';
import {Svg, Path, SvgProps} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';

export const SvgGame = observer((props: SvgProps) => {
  const {theme} = useGlobalStore();
  return (
    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <Path
        d="M8.24473 3.54547L8.24429 3.54566C4.81703 5.02903 2.65707 8.46852 2.80737 12.2019C2.95765 15.9347 5.38863 19.1878 8.92564 20.3928L8.24473 3.54547ZM8.24473 3.54547C11.6452 2.07128 15.597 2.82556 18.2156 5.4368M8.24473 3.54547L18.2156 5.4368M18.2156 5.4368C16.6407 6.90989 13.5427 9.97488 12.303 11.2146L11.6894 11.8282L12.3508 12.39C12.4253 12.4532 12.5059 12.5218 12.5922 12.595C14.002 13.7929 16.9054 16.2598 18.7045 17.7084C16.3045 20.5181 12.4295 21.5846 8.92595 20.3929L18.2156 5.4368Z"
        stroke={getColorStr(theme, 'color_30')}
        strokeWidth="1.6"
      />
      <Path
        d="M9 6.72729C9.70172 6.72729 10.2726 7.29677 10.2726 7.99994C10.2726 8.7031 9.70172 9.27258 9 9.27258C8.29828 9.27258 7.72736 8.70311 7.72736 7.99994C7.72736 7.29677 8.29828 6.72729 9 6.72729Z"
        stroke={getColorStr(theme, 'color_30')}
      />
      <Path
        d="M20.1813 9.81855C21.2944 9.81855 22.2 10.7219 22.2 11.8372C22.2 12.9526 21.2944 13.8559 20.1813 13.8559C19.0683 13.8559 18.1627 12.9526 18.1627 11.8372C18.1627 10.7219 19.0683 9.81855 20.1813 9.81855Z"
        stroke={getColorStr(theme, 'color_30')}
        strokeWidth="1.6"
      />
    </Svg>
  );
});

export const SvgGameAct = observer((props: SvgProps) => {
  const {theme} = useGlobalStore();
  return (
    <Svg width="25" height="24" viewBox="0 0 25 24" fill="none" {...props}>
      <Path
        d="M22.7 11.5161C22.7 13.0188 21.4784 14.2379 19.9706 14.2379C18.4627 14.2379 17.2411 13.0188 17.2411 11.5161C17.2411 10.0134 18.4627 8.79432 19.9706 8.79432C21.4784 8.79432 22.7 10.0108 22.7 11.5161ZM18.6902 17.136C18.7081 17.3175 18.6518 17.4989 18.5343 17.6395C16.0093 20.6603 11.8844 21.8154 8.15828 20.5478C4.42956 19.2777 1.86623 15.848 1.70778 11.9122C1.54933 7.97651 3.82643 4.35002 7.44014 2.78595C11.0538 1.21933 15.2579 2.0397 18.018 4.84582C18.1484 4.9736 18.2225 5.14994 18.2225 5.33139C18.2225 5.5154 18.1484 5.68919 18.018 5.81697C16.5332 7.19958 13.4511 10.2485 12.2269 11.4727C13.4996 12.5537 16.6099 15.2014 18.4397 16.6709C18.5828 16.7884 18.6723 16.9546 18.6902 17.136ZM9.73768 7.73627C9.73768 7.13314 9.24699 6.645 8.64386 6.645C8.04072 6.645 7.55003 7.13314 7.55003 7.73627C7.55003 8.33941 8.04072 8.82754 8.64386 8.82754C9.24699 8.82754 9.73768 8.33941 9.73768 7.73627Z"
        fill={getColorStr(theme, 'color_1')}
      />
    </Svg>
  );
});
